import React, { useState } from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {addAge,setName} from '../redux/actions/homeAction'
import {getCartListAction} from '../redux/actions/cartAction'
function Home() {
   let dispatch = useDispatch();
   let homeState = useSelector((state)=>{
      console.log(state)
      return state.homeReducer
   })
  //  获取cartReducer中购物车列表
   let CartList = useSelector((state)=>{
      return state.cartReducer.list
   })
   console.log(CartList)
   let {name,age} = homeState;
    // 判断购物车列表是否为空
    if(CartList.length===0){
      // 更新购物车列表 当dispatch 参数为回调函数时则表示改提交交给中间件redux-thunk来处理
      dispatch(getCartListAction())
    }
    return (
      <div>
            <div>Home</div>
            <h1>{name}---{age}</h1>
            <button onClick={()=>{
              dispatch(addAge(5))
            }}>++</button>
            <button onClick={()=>{
              dispatch(setName("李四"))
            }}>换人</button>
            <h1>购物车数量：{CartList.length}</h1>
      </div>
    )
  }
export default Home
